<template>
  <view class="app-container tenant-contract-page">
    <view class="contract-wrapper">
      <view class="contract-content" v-html="contract">
      </view>
    </view>
    <!--  撤销按钮，确认按钮  -->
    <view class="contract-footer">
      <view class="contract-footer-item">
        <u-button @click="handleCancel">撤销合同</u-button>
      </view>
      <view class="contract-footer-item">
        <u-button @click="handleConfirm">确认合同</u-button>
      </view>
    </view>

  </view>
</template>

<script>
import {tenantPaperContractDetail, confirmTenantContract, repealTenantContract} from "@/api/mine/owner";

export default {
  data() {
    return {
      contract: null,
      contractId: null
    };
  },
  onLoad(options) {
    const contractId = options.id;
    this.contractId = contractId;
    this.tenantPaperContractDetail(contractId);
  },
  methods: {
    tenantPaperContractDetail(contractId) {
      tenantPaperContractDetail(contractId).then(res => {
        this.contract = res.data.contractContent;
      })
    },
    handleCancel() {
      // 调用接口撤销合同
      console.log("撤销合同");
      const contractId = this.contractId;
      this.$modal.confirm('确定要撤销合同吗？').then(() => {
        repealTenantContract(contractId).then(res => {
          this.$modal.msg(res.msg || '合同撤销成功')
          setTimeout(() => {
            uni.$emit('refreshData',{refresh: true});
            this.$tab.navigateBack();
          }, 1000)
        })
      })
    },
    handleConfirm() {
      // 调用接口确认合同
      console.log("确认合同");
      const contractId = this.contractId;
      this.$modal.confirm('确认合同信息无误？').then(() => {
        confirmTenantContract(contractId).then(res => {
          this.$modal.msg(res.msg || '确认成功')
          setTimeout(() => {
            uni.$emit('refreshData',{refresh: true});
            this.$tab.navigateBack();
          }, 1000)
        })
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.tenant-contract-page {
  padding: 20rpx;

  .contract-wrapper {
    .contract-content {
      padding: 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
    }
  }

  .contract-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20rpx;
    position: fixed;
    width: 100vw;
    left: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;

    .contract-footer-item {
      width: 200rpx;
      border: 1rpx solid #646464;
      border-radius: 20rpx;
      margin-right: 20rpx;
      overflow: hidden;

      &:last-of-type {
        margin-right: 0;
      }
    }

  }
}

</style>
